<script setup>
import {defineUser} from '../store/userStore.js'
import {defineSchedule} from '../store/scheduleStore.js'

let sysUser = defineUser()
let sysSchedule = defineSchedule()

import {useRouter} from 'vue-router'
let router = useRouter()

function logout(){
    sysUser.$reset()
    sysSchedule.$reset()
    router.push("/login")
}

</script>

<template>
  <div>
    <h1 class="ht">欢迎使用日程管理系统</h1>

        <div class="optionDiv" v-if="sysUser.username == ''">
        <router-link to="/login">
            <button class="bls">登录</button>
        </router-link>
        <router-link to="/regist">
            <button class="bls">注册</button>
        </router-link>
    </div>

    <div class="optionDiv" v-else>
        欢迎{{sysUser.username}}
        <button class="blb" @click="logout()">退出登录</button>
        <router-link to="/showSchedule">
            <button class="blb">查看我的日记</button>
        </router-link>
    </div>

    </div>
    

</template>

<style scoped>
    .ht{
        text-align: center;
        color: cadetblue;
        font-family: 幼圆;
    }
    .bls{
        border: 2px solid powderblue;
        border-radius: 4px;
        width: 60px;
        background-color: antiquewhite;
    }
    .blb{
        border: 2px solid powderblue;
        border-radius: 4px;
        width: 100px;
        background-color: antiquewhite;
    }
    .optionDiv{
        width: 500px;
        float: right;
    }

</style>
